<template>
  <div style="padding: 20px"
       class="more">
    <el-form :model="form"
             label-width="100">
      <h1 style="font-size:30px; text-align:center">LONGIN</h1>
      <el-form-item>
        <el-input v-model="form.username"
                  placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.password"
                  type="password"
                  placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item align="center">
        <el-button type="primary"
                   @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      form: {
        username: '',
        password: '123456'
      }
    }
  },
  methods: {
    login () {
      this.$http.post('api/permission/getMenu', this.form).then(res => {
        res = res.data
        if (res.code === 20000) {
          this.$store.commit('clearMenu')
          this.$store.commit('setMenu', res.data.menu)
          this.$store.commit('setToken', res.data.token)
          this.$store.commit('addMenu', this.$router)
          this.$router.push({ name: 'home' })
        } else {
          this.$message.warning(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.more {
  // position: relative;
  width: 100%;
  height: 100%;
  background-color: #336699;
}
.el-form {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 30%;
  margin: auto;
  padding: 45px;
  height: 400px;
  background-color: #99ccff;
  border-radius: 3%;
}
.el-form-item {
  position: relative;
  margin-top: 30px;
  width: 50%;
  left: 50%;
  top: 10%;
  transform: translate(-50%, -50%);
}
</style>
